<html>
<head>
	<meta charset='utf-8' />
	<title>小区信息助手</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
	<style>
		
		@media screen and (max-width:450px){
			#content{width:98%;margin:0 auto;border:1px solid}
			/*页面宽度900以下时 .abc的宽度为450*/
		}
		@media screen and (min-width:450px){
			#content{width:450px;margin:0 auto;border:1px solid}
			/*页面宽度900以下时 .abc的宽度为450*/
		}
	</style>
</head>
<body id='content' style='position:relative'>
	<div id='verify_area' style='display:none;position:absolute;top:100px;border:1px solid;width:100%;height:200px;background:#eef'>
		<h3 style='text-align:center'>请输入小区准入口令</h3>
		<div style='width:250px;margin:0 auto'>
			口　令：
			<input type="text" name='name' />
		</div>
		<div style='margin:20px auto;text-align:center'>
			<button id='verify_submit'>加入小区</button>
			<button id='verify_back'>返回</button>
		</div>
	</div>
	<div style='height:100%;text-align:center' id='main' class='l1'>
		<div style='text-align:right;padding-right:10px' id='createAreaBtn'>
		<a style='text-decoration:none' href="index_me.html">我的小区</a>
		</div>

		<h2>小区信息助手</h2>
		
		<div>
			区域选择：
			<select name="" id="province">
				<option value="">全部</option>
				<option value="">吉林省</option>
			</select>

			<select name="" id="city">
				<option value="">通化市</option>
			</select>

			<select name="" id="county">
				<option value="">柳河县</option>
			</select>
		</div>

		<div style='padding:20px 0' id='areaList'>
			<div style='margin:10px 0' onclick='jumpArea(23)'>金达菜小区</div>
			<div style='margin:10px 0' onclick='jumpArea(23)'>兴隆湾小区</div>
			<div style='margin:10px 0' onclick='jumpArea(23)'>阳光小区</div>
			<div style='margin:10px 0' onclick='jumpArea(23)'>金达要寺菜小区</div>
		</div>
	</div>



</body>
</html>
<script src='../public/jquery.js'></script>
<script src='../public/fun.js'></script>
<script>
var open_city;


$(function(){
	get_open_city(function(){

		var province_str = '';
		for(var i=0;i<open_city.length;i++){
			if(localStorage.province_index && localStorage.province_index == i){
				province_str += "<option selected value='"+i+"'>" +open_city[i].name+ "</option>";
			}else{
				province_str += "<option value='"+i+"'>" +open_city[i].name+ "</option>";
			}
		}
		$('#province').html(province_str);

		set_city();
		$('#province').change(function(){
			localStorage.city_index = 0;
			set_city();
		});


		function set_city(){
			var province_index = $('#province').find('option:selected').index();
			localStorage.province_index = province_index;
			var tmp_city = open_city[province_index].city;
			var city_str = '';
			for(var i=0;i<tmp_city.length;i++){
				if(localStorage.city_index && localStorage.city_index == i){
					city_str += "<option selected value='"+i+"'>" +tmp_city[i].name+ "</option>";
				}else{
					city_str += "<option value='"+i+"'>" +tmp_city[i].name+ "</option>";
				}
			}
			$('#city').html(city_str);
			set_county();
			$('#city').change(function(){
				localStorage.current_county = '';
				set_county();
			});

		}

		function set_county(){
			var province_index = $('#province').find('option:selected').index();
			var city_index = $('#city').find('option:selected').index();
			localStorage.city_index = city_index;
			var tmp_county = open_city[province_index].city[city_index].county;
			var county_str = '';
			for(var i=0;i<tmp_county.length;i++){
				if(localStorage.current_county && localStorage.current_county == JSON.stringify(tmp_county[i])){
					county_str += "<option selected value='"+ JSON.stringify(tmp_county[i]) +"'>" +tmp_county[i].name+ "</option>";
				}else{
					county_str += "<option value='"+ JSON.stringify(tmp_county[i]) +"'>" +tmp_county[i].name+ "</option>";
				}
			}
			$('#county').html(county_str);
			$('#county').change(function(){
				cache_city_info();
			});
			cache_city_info();
			function cache_city_info(){
				localStorage.current_county = $('#county').find('option:selected').val();
			}
		}



	});
	var areaListData = [
		[1,'金达菜小区'],
		[2,'兴隆湾小区']
		,
		[3,'阳光小区'],
		[4,'电业小区']
	];

	var areaListStr = '';
	for(var i=0;i<areaListData.length;i++){
		areaListStr += "<div onclick='jumpArea(23)' style='color:blue;margin:10px 0'>"+areaListData[i][1]+"</div>";
	}
	$('#areaList').html(areaListStr);


	$('#verify_back').click(function(){
		$('#verify_area').hide();
	});
	$('#verify_submit').click(function(){
		$('#verify_area').hide();
		location.href='index_areaDetail.html'
	});
});

function jumpArea(area_id){
	$('#verify_area').show();
}







//获取已开通城市数据
function get_open_city(fun){
	var v1 = 0;
	var open_city_url = upyun_url+open_city_list_path+'?a='+Math.random();
	if(!localStorage.open_city_list){
		get_open_city2(fun);
	}else{
		if(!localStorage.open_city_list_expire || localStorage.open_city_list_expire < new Date().getTime()){
			if(v1)C('过期');
			get_open_city2(fun);
		}else{
			if(v1)C('local');
			open_city = JSON.parse(localStorage.open_city_list);
			fun();
		}
	}
	function get_open_city2(fun){
		Ajax({},function(res){
			if(v1)C('upyun');
			localStorage.open_city_list = res;
			localStorage.open_city_list_expire = new Date().getTime()+6000;
			open_city = JSON.parse(localStorage.open_city_list);
			fun();
		},open_city_url,0,1);
	}
}
</script>